<script setup lang="ts">
// 导入 base64 图片
import planetImage from "@/pages/login-register/components/fly-to-planet-anima/image-planet";
import peopleImage from "@/pages/login-register/components/fly-to-planet-anima/image-people";
import {reactive, onMounted, ref} from "vue";

// 定义组件参数并指定默认值
const props = withDefaults(
    defineProps<{
      imageSize: string,
      planetAppearDur: number,
      planetDur: number,
      peopleAppearDur: number,
      peopleDur: number,
    }>(),
    {
      imageSize: '480rpx',
      planetAppearDur: 1,
      planetDur: 3,
      peopleAppearDur: 1.25,
      peopleDur: 3,
    }
)


// 定义 css 变量，绑定到图片盒子上实现组件样式可以由组件参数指定
const cssVar = reactive({
  '--image-size': props.imageSize,
  '--planet-appear-dur': props.planetAppearDur + 's',
  '--planet-dur': props.planetDur + 's',
  '--people-appear-dur': props.peopleAppearDur + 's',
  '--people-dur': props.peopleDur + 's',
})

// 图片的 class 类名
const planetImageClasses = ref(['planet-appear-animation'])
const peopleImageClasses = ref(['people-appear-animation'])

// 组件挂在完成后等待图片出现动画执行完成后替换动画类名
onMounted(() => {
  // 通过计时器替换图片的 class 类名
  setTimeout(() => {
    planetImageClasses.value.shift()
    planetImageClasses.value.unshift('planet-animation')
  }, props.planetAppearDur * 1000)
  setTimeout(() => {
    peopleImageClasses.value.shift()
    peopleImageClasses.value.unshift('people-animation')
  }, props.peopleAppearDur * 1000)
})
</script>

<template>
  <!-- 飞向星球动画组件 -->
  <view class="fly-to-planet-anima">
    <!-- 图片盒子 -->
    <view class="image-box" :style="cssVar">
      <image
          class="planet-image"
          :class="planetImageClasses"
          :src="planetImage"
          mode="aspectFit"
      ></image>
      <image
          class="people-image"
          :class="peopleImageClasses"
          :src="peopleImage"
          mode="aspectFit"
      ></image>
    </view>
  </view>
</template>

<style scoped lang="scss">
// 飞向星球动画组件
.fly-to-planet-anima {

  // 图片盒子
  // 用于实现动效中的两个图片重叠
  .image-box {
    width: var(--image-size);
    height: var(--image-size);
    margin: auto;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;

    image {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 2;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    // 行星出现动画
    .planet-appear-animation {
      animation: planet-appear var(--planet-appear-dur) ease-in-out;
    }

    // 行星动画
    .planet-animation {
      animation-name: planet; // 执行动画名称
      animation-duration: var(--planet-dur); // 动画执行周期时长
      animation-timing-function: ease-in-out; // 动画执行效果方法
      animation-iteration-count: infinite; // 动画执行次数
      animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
    }

    // 人出现动画
    .people-appear-animation {
      animation: people-appear var(--people-appear-dur) ease-in-out;
    }

    // 行星动画
    .people-animation {
      animation-name: people; // 执行动画名称
      animation-duration: var(--people-dur); // 动画执行周期时长
      animation-timing-function: ease-in-out; // 动画执行效果方法
      animation-iteration-count: infinite; // 动画执行次数
      animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
    }
  }
}

// 行星出现动画
@keyframes planet-appear {
  0% {
    opacity: 0;
    transform: translate(0, -100%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

// 行星动画
@keyframes planet {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 10%);
  }
}

// 人出现动画
@keyframes people-appear {
  0% {
    opacity: 0;
    transform: translate(-100%, 100%) scale(0);
  }
  100% {
    opacity: 1;
    // 位移只回到 5% 是为了防止下一个动画的顿挫感
    transform: translate(0, 5%) scale(1);
  }
}

// 人动画
// 运动方向与行星相反
@keyframes people {
  0% {
    transform: translate(0, 5%);
  }

  100% {
    transform: translate(0, 0);
  }
}
</style>